<template>
  <div class="bg-white my-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 左右布局容器 -->
      <div class="flex flex-col md:flex-row gap-6">
        <div class="user-profile md:w-1/4 p-6">
        <!-- 左侧用户信息 -->
          <a-card
            :bordered="false"
            :style="{ width: '250px', background: '#EBECF8', borderRadius: '14px', marginTop: '12px' }"
          >
            <a-badge  :offset="[-10, 290]">
              <template #content>
                <img
                  src="@/assets/images/Male.png"
                  alt="Male"
                  style="width: 30px; height: 30px;"
                />
              </template>
              <a-image
                  src='https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
                  width="200"
                  height="280"
                  style="margin: 10px;border-radius: 14px; overflow: hidden; border: none; box-shadow: none;"
                  :preview-visible="false"
                >
              </a-image>
            </a-badge>
            <div class="flex flex-col px-2">
              <div class="text-[20px] font-bold my-2">
                {{ userInfo.profile?.nickName }}
              </div>
              <div class="flex gap-2 mt-1 mb-2">
                <img src="@/assets/images/fullName.png" class="w-[20px] h-[20px]" />
                <span class="text-gray-500 text-sm">{{ userInfo.profile?.firstName }} {{ userInfo.profile?.lastName }}</span>
              </div>
              <div class="flex gap-2 mt-1 mb-2">
                <img src="@/assets/images/email.png" class="w-[20px] h-[20px]" />
                <span class="text-gray-500 text-sm">{{ userInfo.email }}</span>
              </div>
              <div class="flex gap-2 mt-1 mb-2">
                <img src="@/assets/images/country.png" class="w-[15px] h-[18px] mx-[2.5px] my-[1px]" />
                <span class="text-gray-500 text-sm">{{ userInfo.profile?.location?.country }}</span>
              </div>
              <div class="flex gap-2 mt-1 mb-2">
                <img src="@/assets/images/city.png" class="w-[18px] h-[18px] mx-[1px] my-[1px]" />
                <span class="text-gray-500 text-sm">{{ userInfo.profile?.location?.city }}</span>
              </div>
              <div v-if="userInfo.affiliation&&userInfo.affiliation.name" class="flex gap-2 mt-1 mb-2">
                <img src="@/assets/images/organization.png" class="w-[20px] h-[20px]" />
                <span class="text-gray-500 text-sm">{{ userInfo.affiliation?.name }}</span>
              </div>
              <img src="@/assets/images/specialist.png" class="w-[136px] h-[30px] -ml-[34px] relative" />
              <a-button type="outline" shape="round" class="mt-8" style="border-color: #2A3FF0; color: #2A3FF0;;" @click="showChangeUserInfo = true">CHANGE INFO</a-button>
              <div class="border-t-2 border-dashed border-primary my-4"></div>
              <div class="text-[12px] text-center">*《用户数据保护》声明</div>
            </div>
          </a-card>
          <a-card
            :bordered="false"
            :style="{ width: '250px', background: '#EBECF8', borderRadius: '14px', marginTop: '12px' }"
          >
            <!-- 用户菜单 -->
            <div class="custom-menu">
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '1' }" 
                @click="activeMenu = '1'"
              >
                <div class="menu-icon"><icon-send /></div>
                <div class="menu-text">My Posts</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '1'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '2' }" 
                @click="activeMenu = '2'"
              >
                <div class="menu-icon"><icon-question-circle /></div>
                <div class="menu-text">My Q&A</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '2'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '3' }" 
                @click="activeMenu = '3'"
              >
                <div class="menu-icon"><icon-file /></div>
                <div class="menu-text">My Cases</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '3'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '4' }" 
                @click="activeMenu = '4'"
              >
                <div class="menu-icon"><icon-bookmark /></div>
                <div class="menu-text">Case Screening</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '4'" /><icon-down v-else /></div>
              </div>
            </div>
          </a-card>
          <a-card
            :bordered="false"
            :style="{ width: '250px', background: '#EBECF8', borderRadius: '14px', marginTop: '12px' }"
          >
            <!-- 消息菜单 -->
            <div class="custom-menu">
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '5' }" 
                @click="activeMenu = '5'"
              >
                <div class="menu-icon"><icon-message /></div>
                <div class="menu-text">Messages</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '5'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '6' }" 
                @click="activeMenu = '6'"
              >
                <div class="menu-icon"><icon-thumb-up /></div>
                <div class="menu-text">Likes</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '6'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '7' }" 
                @click="activeMenu = '7'"
              >
                <div class="menu-icon"><icon-history /></div>
                <div class="menu-text">History</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '7'" /><icon-down v-else /></div>
              </div>
              <div 
                class="custom-menu-item" 
                :class="{ 'active': activeMenu === '8' }" 
                @click="activeMenu = '8'"
              >
                <div class="menu-icon"><icon-star /></div>
                <div class="menu-text">Favorites</div>
                <div class="menu-arrow"><icon-right v-if="activeMenu !== '8'" /><icon-down v-else /></div>
              </div>
            </div>
          </a-card>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-area md:w-3/4 mt-12">
          <!-- 内容标签页 -->
          <div v-if="activeMenu === '1'">
            <MyPosts :uid="uid" />
          </div>
          <div v-if="activeMenu === '2'">
            <MyQA :uid="uid" />
          </div>
          <div v-if="activeMenu === '3'">
            <MyCases :uid="uid" />
          </div>
          <div v-if="activeMenu === '5'">
            <Comments :uid="uid" />
          </div>
          <div v-if="activeMenu === '6'">
            <Likes :uid="uid" />
          </div>
          <div v-if="activeMenu === '7'">
            <History :uid="uid" />
          </div>
          <div v-if="activeMenu === '8'">
            <Favorites :uid="uid" />
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 修改用户信息弹窗 -->
  <ChangeUserInfo v-model:visible="showChangeUserInfo" :user-info="userInfo" @success="fetchUserInfo" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { userInfoApi } from '@/api/user'
import MyPosts from './components/myposts.vue'
import MyQA from './components/myqa.vue'
import MyCases from './components/mycases.vue'
import Comments from './components/comments.vue'
import Likes from './components/likes.vue'
import History from './components/history.vue'
import Favorites from './components/favorites.vue'
import ChangeUserInfo from './components/changeUserInfo.vue'
import {
  IconFile,
  IconQuestionCircle,
  IconStar,
  IconThumbUp,
  IconMessage,
  IconRight,
  IconDown
} from '@arco-design/web-vue/es/icon'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const uid = userStore.userInfo?.uid || ''

// 用户信息
const userInfo = ref({} as any)

// 当前选中的菜单项
const activeMenu = ref('1')

// 修改用户信息弹窗状态
const showChangeUserInfo = ref(false)

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const res = await userInfoApi(uid)
    if (res && res.data) {
      userInfo.value = res.data
    }
    console.log('userInfo', userInfo.value)
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}

// 跳转到文章详情
const goToDetail = (post: any) => {
  router.push({
    path: '/news/detail',
    query: {
      id: post.id
    }
  })
}

// 跳转到问答详情
const goToQADetail = (qa: any) => {
  router.push({
    path: '/faq',
    query: {
      id: qa.id
    }
  })
}

// 跳转到筛查详情
const goToScreeningDetail = (screening: any) => {
  router.push({
    path: '/cases/detail',
    query: {
      id: screening.id
    }
  })
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-profile {
  height: fit-content;
  position: sticky;
  top: 20px;
}

.custom-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #EBECF8;
  color: #333;
  position: relative;
}

.custom-menu-item.active {
  background-color: #2A3FF0;
  color: white;
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #2A3FF0;
  font-size: 20px;
}

.custom-menu-item.active .menu-icon {
  color: white;
}

.menu-text {
  flex: 1;
  font-weight: 500;
}

.menu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.custom-menu-item.active .menu-arrow {
  color: white;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>